<template>
  <div class="playerBox" v-if="!this.$route.meta.isShow">
    <div class="pgb">
      <div class="img_box" ref="img_box" @click="showFullScreen">
        <img :style="{animationPlayState:togglePlay?'running':'paused'}" v-if="songMsg&&songMsg.picUrl" :src="songMsg.picUrl" alt="">
        <img v-else src="https://s3.music.126.net/mobile-new/img/disc_default.png?ba7c53e25dbac9fe14f024846ddb57d2=" alt="">
        <van-circle class="circleBox" :stroke-width="40" v-model="percentage2" :rate="40" :speed="100" layer-color="#ebedf0" />
      </div>
      <div class="text_box">
        <div class="name" v-if="songMsg&&songMsg.song&&songMsg.song.alias">{{songMsg.name}}: {{songMsg.song.alias[0]}}</div>
        <div class="autor" v-if="songMsg&&songMsg.song&&songMsg.song.artists&&songMsg.song.artists[0]">{{songMsg.song.artists[0].name}}</div>
      </div>
      <div class="icons">
        <i class="iconfont prev" @click="preSong">&#xe6a7;</i>
        <i @click="togglePlay=!togglePlay" v-show="togglePlay&&allSong" class="iconfont pause">&#xe6a5;</i>
        <i @click="togglePlay=!togglePlay" v-show="!togglePlay||!allSong" class="iconfont play">&#xe6a4;</i>
        <i class="iconfont next" @click="nextSong">&#xe6a6;</i>
      </div>
    </div>
    <audio controls style="display:block;" @timeupdate="timeupdate" @ended="autoSong" autoplay class="audios" ref="musicPlayer" :src="songUrl" muted></audio>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  data() {
    return {
      fullScreen: false,
      allSong: [],
      songMsg: {},
      songIndex: '',
      songUrl: '',
      playTime: '',
      togglePlay: true,
      resArr: [],
      playIndex: '',
      currentRate: 40
    };
  },
  created() {},
  // updated() {
  //   console.log('duration', this.$refs.musicPlayer.duration);
  // },
  methods: {
    timeupdate(e) {
      if (this.$refs.musicPlayer && this.$refs.musicPlayer.currentTime) {
        this.playTime = this.$refs.musicPlayer.currentTime.toFixed(1) - 0;
        if (e.target && e.target.currentTime && e.target.duration) {
          const acurrentTime = e.target.currentTime;
          const aduration = e.target.duration;
          this.$store.commit('musicTimeProcess', { duration: aduration, currentTime: acurrentTime });
          const percentages = e.target.currentTime / aduration;
          this.currentRate = percentages;
          this.$store.commit('percentage2', percentages * 100);
          this.$store.commit('musicTimeProcess', { duration: aduration, currentTime: acurrentTime });
        }
      }
    },
    // 切歌模式
    autoSong() {
      if (this.mode == 1) {
        this.songIndex++;
        if (this.songIndex == this.allSong.length) {
          this.songIndex = -1;
        }
      } else if (this.reset) {
        this.$refs.musicPlayer.currentTime = 0;
      } else if (this.mode == 3) {
        this.songIndex = (this.allSong.length - 1) * Math.random;
      }
    },
    //显示全屏
    showFullScreen() {
      this.$store.commit('fullScreen', true);
      // this.$store.commit('showPlayBox', false);
      if (this.songMsg && this.songMsg.id) {
        this.$store.dispatch('getLyric', this.songMsg.id);
      }
    },
    //下一首
    nextSong() {
      if (this.mode == 1) {
        this.songIndex++;
        if (this.songIndex == this.allSong.length) {
          this.songIndex = -1;
        }
      } else if (this.reset) {
        this.$refs.musicPlayer.currentTime = 0;
      } else if (this.mode == 3) {
        this.songIndex = Math.floor((this.allSong.length - 1) * Math.random());
      }
    },
    //上一首
    preSong() {
      if (this.mode == 1) {
        this.songIndex--;
        if (this.songIndex == 0) {
          this.songIndex = this.allSong.length + 1;
        } else if (this.reset) {
          this.$refs.musicPlayer.currentTime = 0;
        } else if (this.mode == 3) {
          this.songIndex = Math.floor((this.allSong.length - 1) * Math.random());
        }
      }
    },
    //获取状态
    getShow() {
      this.togglePlay = this.$store.state.showPlayBox;
    },

    play(val) {
      if (this.$store.songsObject == 0) {
        alert('请添加歌曲');
      } else {
        if (val) {
          this.togglePlay = true;
          this.$refs.img_box.style.animationPlayState = 'running';
          this.$refs.musicPlayer.play();
        } else {
          this.togglePlay = false;
          this.$refs.img_box.style.animationPlayState = 'pause';
          this.$refs.musicPlayer.pause();
        }
      }
    },
    //获取歌曲地址
    async getSongUrl() {
      if (this.songMsg && this.songMsg.id != '') {
        const res = await this.$http.get(`/song/url?id=${this.songMsg.id}`);
        if (res.data && res.data.data) {
          this.songUrl = res.data.data[0].url;
        }
      }
    }
  },
  computed: {
    ...mapState(['rotateing', 'reset', 'click']),
    percentage2: {
      set: function (val) {
        return val;
      },
      get: function () {
        return this.$store.state.percentage2;
      }
    },
    percentage: {
      set: function () {},
      get: function () {
        return this.$store.state.percentage;
      }
    },
    mode() {
      return this.$store.state.mode;
    },
    getLyric() {
      return this.$store.state.lyricArr;
    },
    showPlayBox() {
      return this.$store.state.showPlayBox;
    },
    show() {
      return this.$store.state.showPlayBox && this.$store.state.songsObject;
    },
    getAllSongMsg() {
      return this.$store.state.songsObject.newAllList;
    },
    getSongIndex() {
      return this.$store.state.songsObject.currentSongIndex;
    }
  },
  watch: {
    click(val) {
      if (val) {
        this.$refs.musicPlayer.currentTime = 0;
        this.$store.commit('click', false);
      }
    },
    percentage(val) {
      // this.$refs.musicPlayer.currentTime = (this.$refs.musicPlayer.duration * val) / 100;
      this.$refs.musicPlayer.currentTime = val * this.$refs.musicPlayer.duration;
    },
    rotateing: {
      handler: function (val) {
        this.play(val);
        this.togglePlay = val;
      }
    },
    // mode() {
    //   this.autoSong();
    // },
    playTime: {
      deep: true,
      handler: function (newValue, oldValue) {
        let that = this;
        this.getLyric.forEach((item, index) => {
          let tl = item.time.split(':');
          let nextIndex = index;
          nextIndex++;
          if (that.getLyric[nextIndex]) {
            let t2 = that.getLyric[nextIndex].time.split(':');
            let nowTime = parseFloat(tl[0]) * 60 + parseFloat(tl[1]);
            let nextTime = parseFloat(t2[0]) * 60 + parseFloat(t2[1]);
            if (newValue > nowTime && newValue < nextTime && item.lyc != '') {
              that.playIndex = index;
              this.$store.commit('playIndex', index);
            }
          }
        });
      }
    },
    //下标变化的时候
    songIndex: {
      deep: true,
      immediate: false,
      handler: function (val) {
        if (val != '' && val <= this.allSong.length && val >= 0) {
          this.songMsg = this.allSong[val];
          this.getSongUrl();
          this.togglePlay = false;
          this.togglePlay = true;
        }
      }
    },
    show: {
      deep: true,
      immediate: true,
      handler: function (val) {
        this.togglePlay = val;
      }
    },
    getSongIndex: {
      immediate: false,
      deep: true,
      handler: function (newValue) {
        this.songIndex = newValue;
        this.songMsg = this.allSong[this.songIndex];
        this.getSongUrl();
        this.$nextTick(() => {
          if (this.songMsg && this.songMsg.id) {
            this.$store.dispatch('getLyric', this.songMsg.id);
          }
        });
      }
    },
    //获取当前歌曲信息对象
    getAllSongMsg: {
      immediate: false,
      deep: true,
      handler: function (newValue) {
        if (newValue.length != 0) {
          this.allSong = newValue;
          this.songMsg = newValue[this.songIndex];
          this.getSongUrl();
        } else if (newValue.length == 0) {
          this.allSong = '';
          this.songMsg = '';
          (this.$refs.musicPlayer.currentTime = 0), this.$refs.musicPlayer.pause();
          this.play(false);
          this.$store.commit('percentage2', 0);
        }
      }
    },
    togglePlay: {
      immediate: false,
      deep: true,
      handler: function (val) {
        this.play(val);
        this.$store.commit('rotateing', val);
      }
    }
  }
};
</script>
<style lang='less' scoped >
@keyframes rotatePic {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes moveto {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(150px);
  }
}
.circleBox {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 48px;
  height: 48px;
}
.icons {
}
.iconfont {
  font-size: 30px !important;
  color: white;
}
.text_box {
  margin-left: -13px;
  margin-top: -23px;
}
.img_box {
  border-radius: 25px;
  padding: 10px;
  height: 25px;
  margin-right: 10px;
  position: relative;
  // width: 25px;
  /* height: 43px
px
; */
  img {
    animation: 3s rotatePic linear infinite;
  }
  box-sizing: content-box;
  background: rgb(12, 12, 12);
}
.name {
  animation: 3s moveto linear infinite;
  padding-bottom: 10px;
  width: 150px;
  color: #f5f8ff;
  font-size: 16px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap !important;
  // outline: 0 !important
}
.autor {
  color: rgb(250, 245, 245);
  font-size: 14px;
}
.playerBox {
  height: 70px;
  background-color: #303133;
  width: 100%;
  position: fixed;
  z-index: 998;
  bottom: 0;
}
.pgb {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  img {
    width: 25px;
    height: 25px;
    border-radius: 25px;
  }
}
</style>